<!--
 * @Author: xuna
 * @Descripttion: 投票报名活动
-->
<template>
  <div class="vote-container">
    <el-tabs v-model="activeName" class="tab-panel" @tab-click="handleClick">
      <el-tab-pane label="报名活动" name="0"></el-tab-pane>
      <el-tab-pane label="投票活动" name="1"></el-tab-pane>
    </el-tabs>
    <div class="search-container">
      <el-form ref="formInline" :inline="true" :model="noticeInfo">
        <el-row type="flex" justify="space-around" align="middle" style="height:100%;">
          <el-col :sm="7">
            <el-form-item label="活动名称" prop="title">
              <el-input
                v-model="noticeInfo.title"
                placeholder="请输入活动名称"
                class="normal-input"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="12" style="display:flex;align-items: center;">
            <!-- <el-row type="flex" class="date-row"> -->
            <el-form-item label="创建日期:" prop="startTime">
              <!-- <el-col class="sign-time"> -->
              <!-- :editable="false" prefix-icon="null" -->
              <el-date-picker
                v-model="noticeInfo.startTime"
                class="sign-time"
                type="date"
                placeholder="开始日期"
                :picker-options="statrPickOption"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
              <!-- <i class="el-icon-caret-bottom"></i>
                </el-col> -->
            </el-form-item>
            ~
            <!-- <el-col class="tag-icon"><i></i></el-col> -->
            <el-form-item label="" prop="endTime">
              <!-- <el-col class="sign-time"> -->
              <el-date-picker
                v-model="noticeInfo.endTime"
                class="sign-time"
                type="date"
                placeholder="结束日期"
                :picker-options="endPickOption"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
              <!-- <i class="el-icon-caret-bottom"></i> -->
              <!-- </el-col> -->
            </el-form-item>

            <!-- </el-row> -->
          </el-col>
          <el-col class="setting-btn" :sm="6">
            <el-form-item>
              <el-button class="settbtn reset-btn" @click="resetForm()">重置</el-button>
              <el-button class="settbtn search-btn" type="primary" @click="getTableList()">
                查询
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <section class="main-panel">
      <sign-activity
        :is-activity="activeName"
        :search-content="searchContent"
        :is-reset="isSignReset"
      ></sign-activity>
      <vote-activity
        :is-activity="activeName"
        :search-content="searchContent"
        :is-reset="isReset"
      ></vote-activity>
      <!-- :is-jump-id="jumpId"
        :jump-type="jumpType" -->
    </section>
  </div>
</template>

<script>
  import SignActivity from './components/SignActivity';
  import VoteActivity from './components/VoteActivity';

  export default {
    components: { SignActivity, VoteActivity },
    data() {
      return {
        activeName: '0',
        isReset: false,
        isSignReset: false,
        noticeInfo: {
          title: '',
          startTime: null,
          endTime: null,
        },

        searchContent: {},
        statrPickOption: {
          disabledDate: time => {
            if (this.noticeInfo.endTime != null) {
              return (
                time.getTime() > new Date(this.noticeInfo.endTime).getTime() - 8.64e6 ||
                time.getTime() < 1577808000000 ||
                time.getTime() > 1609344000000
              );
            } else {
              return time.getTime() < 1577808000000 || time.getTime() > 1609344000000;
            }
          },
        },
        endPickOption: {
          disabledDate: time => {
            if (this.noticeInfo.startTime != null) {
              return (
                time.getTime() < new Date(this.noticeInfo.startTime).getTime() - 8.64e7 ||
                time.getTime() < 1577808000000 ||
                time.getTime() > 1609344000000
              );
            } else {
              return time.getTime() < 1577808000000 || time.getTime() > 1609344000000;
            }
          },
        },
        jumpId: '',
        jumpType: -1,
      };
    },
    activated() {
      // if (this.$route.query.id) {
      //   this.jumpId = this.$route.query.id;
      // } else {
      //   this.jumpId = '';
      // }
      if (this.$route.query.activityType) {
        let jumpType = Number(this.$route.query.activityType);
        this.activeName = jumpType == 1 ? '0' : '1';
      } else {
        // this.jumpType = -1;
        this.activeName = '0';
      }
    },
    methods: {
      handleClick(tab) {
        console.log(tab.index);
        this.activeName = tab.index;
        this.$refs.formInline.resetFields();
      },
      getTableList() {
        this.searchContent = this.noticeInfo;
        if (this.activeName == 1) {
          this.isReset = !this.isReset;
        } else {
          this.isSignReset = !this.isSignReset;
        }
        console.log('---------查询', this.noticeInfo);
      },
      resetForm() {
        this.$refs.formInline.resetFields();
        this.searchContent = this.noticeInfo;
        if (this.activeName == 1) {
          this.isReset = !this.isReset;
          console.log(this.noticeInfo, '-----重置');
        } else {
          this.isSignReset = !this.isSignReset;
          console.log(this.noticeInfo, '-----重置');
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import '~@/styles/mixin.scss';
  .vote-container {
    width: 100%;
    min-height: 100%;
    height: 100%;
    /deep/.el-table__fixed-body-wrapper {
      top: 44px !important;
    }
    .main-panel {
      padding: 0 !important;
      height: calc(100% - 129px) !important;
    }
    .tab-panel {
      padding: 0 16px 0 !important;
      box-sizing: border-box;
    }
    .tab-panel,
    /deep/.el-tabs__header,
    /deep/.el-tabs__nav-wrap,
    /deep/.el-tabs__nav-scroll,
    /deep/.el-tabs__nav {
      background-color: #fff;
      margin-bottom: 16px;
      width: 100%;
      height: 48px;
      font-size: 14px;
      color: #353739;
      border-radius: 8px;
      font-weight: 500;
    }
    .search-container {
      min-height: 65px;
      /deep/.el-form--inline {
        min-height: 65px;
        background-color: #fff;
        border-radius: 7px;
        padding: 10px 0 10px 24px;
        box-sizing: border-box;
      }
      /deep/.el-input {
        background: rgba(255, 255, 255, 1);
        border-radius: 7px;
        border: 1px solid rgba(244, 240, 243, 1);
      }
      /deep/.el-table {
        border-radius: 7px;
      }
      .setting-btn {
        display: flex;
        justify-content: flex-end;
      }
      .settbtn {
        width: 94px;
        height: 36px;
        border-radius: 7px;
      }
      .reset-btn {
        background: rgba(255, 254, 255, 1);
        border: 1px solid rgba(232, 228, 232, 1);
      }
      .search-btn {
        background-color: #3771e9;
      }
      .normal-input {
        width: 210px;
        height: 36px;
      }
      .data-select {
        width: 300px;
      }
      .bottom-panel {
        padding-left: 40px;
        box-sizing: border-box;
      }
      /deep/.el-form-item {
        margin: 0;
      }
    }
  }

  // .date-row {
  //   /deep/.el-form-item {
  //     margin-right: 0;
  //   }
  // }
  .sign-time {
    // @include wh(100%, 36px);
    width: 180px;
    position: relative;
    margin: 0 4px;
    // /deep/.el-input__inner {
    //   width: 100%;
    //   padding: 0 0 0 17px;
    //   border-radius: 7px;
    //   border: 1px solid #f4f0f3;
    // }
    > i {
      position: absolute;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      color: #979698;
    }
  }
  .tag-icon {
    width: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    > i {
      @include wh(7px, 2px);
      background-color: #979698;
    }
  }
</style>
